<template>
  <keep-alive>
    <div class="addScore">
      <!-- 新建评分表 -->
      <div class="container">
        <div class="title">
          <span class="details">评分详情</span>
          <!-- <span class="toList" @click="toList">返回评分列表</span> -->
        </div>
        <div class="content">
          <div class="topBtn">
            <span></span>
            <div class="scoreName">
              <span>评分表名称：</span>
              <el-form
                :model="addEvaluationDto"
                :rules="rules"
                ref="ruleForm"
                class="demo-ruleForm"
              >
                <el-form-item prop="name">
                  <el-input
                    v-model="addEvaluationDto.name"
                    maxlength="25"
                    class="elInput"
                  ></el-input>
                </el-form-item>
              </el-form>
              <!-- <input type="text" name="" placeholder="请输入新增评分表名称" v-model="addEvaluationDto.name" /> -->
            </div>
            <div class="Btn">
              <button @click="cancel">取消</button>
              <button @click="addListBtn()" v-preventReClick>提交</button>
            </div>
          </div>
          <div class="tableContent">
            <span>评分表</span>
            <div class="table">
              <table
                cellspacing="0"
                cellpadding="0"
                style="border-collapse: collapse"
              >
                <thead>
                  <tr
                    style="height: 55px; background: #e6ebff; font-size: 14px"
                  >
                    <th style="width: 338px">能力</th>
                    <th style="width: 500px">能力细化</th>
                    <th style="width: 160px">总分</th>
                    <th style="width: 150px">阶段性考核占比(%)</th>
                    <th style="width: 150px">过程性考核占比(%)</th>
                    <th style="width: 377px">显示</th>
                  </tr>
                </thead>
                <tbody style="text-align: center; font-size: 12px">
                  <tr v-for="(ele, i) in tableList" :key="ele.id">
                    <td class="itemTitle">
                      <!-- {{ele.evaluationdetail.title}} -->
                      <input
                        type="text"
                        v-model="ele.evaluationdetail.title"
                        maxlength="10"
                      />
                      <!-- <p>ID</p> -->
                    </td>
                    <!-- <td></td> -->
                    <td class="Capability-refinement">
                      <table
                        class="table1"
                        cellspacing="0"
                        cellpadding="0"
                        style="border-collapse: collapse"
                      >
                        <tr
                          v-for="(
                            item, index2
                          ) in ele.evaluationdetailitemDtoList"
                          :key="item.id"
                        >
                          <td style="width: 200px">
                            <img
                              v-if="ele.evaluationdetailitemDtoList.length > 5"
                              @click="deleteBtn(index2, ele)"
                              src="../../assets/scoreManageDeleteBtn.png"
                              alt=""
                            />
                            <span style="font-size: 14px; color: #555"
                              >编号:&nbsp;</span
                            >
                            <!-- <span>{{item.evaluationdetailitem.id}}</span> -->
                            <input
                              type="number"
                              v-model="item.evaluationdetailitem.ordernum"
                              style="width: 56px"
                              oninput="if(value.length>5)value=value.slice(0,5)"
                            />
                            <img
                              v-if="
                                ele.evaluationdetailitemDtoList.length - 1 ===
                                index2
                              "
                              src="@/assets/addScoreList.png"
                              alt=""
                              class="addBtnItem"
                              @click="addScoreItem(ele, i)"
                            />
                          </td>
                          <td style="width: 360px; line-height: 43px">
                            <input
                              type="text"
                              name="communicateInput"
                              placeholder="请输入能力问题"
                              v-model="item.evaluationdetailitem.name"
                              style="width: 98%"
                              maxlength="20"
                            />
                          </td>
                        </tr>
                      </table>
                    </td>
                    <td>
                      <table
                        class="table2"
                        cellspacing="0"
                        cellpadding="0"
                        style="border-collapse: collapse"
                      >
                        <tr
                          v-for="(
                            item, index2
                          ) in ele.evaluationdetailitemDtoList"
                          :key="index2"
                        >
                          <td
                            style="width: 100%; line-height: 43px; padding: 0"
                          >
                            <input
                              id="miscodeInput"
                              v-model="item.evaluationdetailitem.total"
                              oninput="if(value.length>5)value=value.slice(0,5);if(value>1000)value=1000;if(value<0)value=0;"
                              min="0"
                              max="1000"
                              type="Number"
                              placeholder="请输入总分"
                            />
                          </td>
                        </tr>
                      </table>
                    </td>
                    <td class="Capability-refinement">
                      <table
                        class="table2"
                        cellspacing="0"
                        cellpadding="0"
                        style="border-collapse: collapse"
                      >
                        <tr
                          v-for="item2 in ele.evaluationdetailitemDtoList"
                          :key="item2.id"
                        >
                          <td style="width: 100%; line-height: 43px">
                            <input
                              type="number"
                              style="width: 90px"
                              v-model="
                                item2.evaluationdetailitemsubList[0].percentage
                              "
                              oninput="if(value.length>2)value=value.slice(0,3)"
                            />
                          </td>
                        </tr>
                      </table>
                    </td>
                    <td>
                      <table
                        class="table2"
                        cellspacing="0"
                        cellpadding="0"
                        style="border-collapse: collapse"
                      >
                        <tr
                          v-for="item2 in ele.evaluationdetailitemDtoList"
                          :key="item2.id"
                        >
                          <td style="width: 100%; line-height: 43px">
                            <input
                              type="number"
                              style="width: 90px"
                              v-model="
                                item2.evaluationdetailitemsubList[1].percentage
                              "
                              oninput="if(value.length>2)value=value.slice(0,3)"
                            />
                          </td>
                        </tr>
                      </table>
                    </td>
                    <td class="showSel">
                      <!-- <span>{{ele.evaluationdetail.type}}</span> -->
                      <el-select
                        v-model="ele.evaluationdetail.type"
                        placeholder="请选择显示图形"
                        style="width: 98%; height: 100%"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <!-- <input type="text" name="" id=""> -->
                      <!-- <img src="../../assets/triangle.png" alt="" > -->
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <!-- 角色表 -->
          <div class="role">
            <div class="roleTitle">
              <span>项目角色表</span>
              <img
                src="@/assets/addScoreList.png"
                alt=""
                @click="addRoleItem"
              />
            </div>
            <div class="roleContent">
              <div v-for="item in roleList" :key="item.id">
                <input
                  type="text"
                  placeholder="请输入角色名称"
                  v-model="item.name"
                  maxlength="5"
                  @blur="roleName"
                  style="font-size: 14px"
                />
                <img
                  src="@/assets/deleteRoleBtn.png"
                  alt=""
                  @click="deleteRoleItem(item)"
                />
                <!-- <el-input type="text" placeholder="请输入角色名称"  maxlength="10" show-word-limit style="background: #E8F8EC;" id="inputRole"> </el-input> -->
              </div>
            </div>
          </div>
          <!-- 设置显示表 -->
          <!-- <div class="show">
            <span>显示设置</span>
            <div class="tableContent">
              <div class="addShowItem" @click="addShow()">
                <img src="../../assets/addScoreList.png" alt="" />
              </div>
              <table>
                <thead>
                  <tr>
                    <td>序号</td>
                    <td v-for="(item, index) in showList" :key="item.id">
                      {{ index + 1
                      }}<img
                        src="@/assets/scoreManageDeleteBtn.png"
                        alt=""
                        @click="deleteShow(item, index)"
                      />
                    </td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>编号</td>
                    <td v-for="item in showList" :key="item.id">
                      <input
                        type="number"
                        v-model="item.ordernum"
                        placeholder="ID号"
                        style="width: 35px"
                        oninput="if(value.length>5)value=value.slice(0,5)"
                      />
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </keep-alive>
</template>

<script>
import {AddScoreList} from '@/api/scoreManage/score.js';
export default {
  data() {
    return {
      tableList: [
        {evaluationdetail: {
          createtime: '',
          evaluationid: 0,
          id: 1,
          title: '知识',
          type: ''
        },
        evaluationdetailitemDtoList: [
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 1,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 2,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 3,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 4,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 5,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          }
        ]},
        {evaluationdetail: {
          title: '能力',
          type: ''
        },
        evaluationdetailitemDtoList: [
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 6,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 7,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 8,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 9,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 10,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          }
        ]},
        {evaluationdetail: {
          title: '素养',
          type: ''
        },
        evaluationdetailitemDtoList: [
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 11,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 12,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 13,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 40,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 14,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 15,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          }
        ]}
      ],
      tableList1: [
        {evaluationdetail: {
          title: '素质能力',
          type: ''
        },
        evaluationdetailitemDtoList: [
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 1,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 2,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 3,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 4,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 5,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          }
        ]},
        {evaluationdetail: {
          title: '沟通能力',
          type: ''
        },
        evaluationdetailitemDtoList: [
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 6,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 7,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 8,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 9,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 10,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          }
        ]},
        {evaluationdetail: {
          createtime: '',
          evaluationid: 0,
          id: 3,
          title: '知识能力',
          type: ''
        },
        evaluationdetailitemDtoList: [
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 11,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 12,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 13,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 40,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 14,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          },
          {
            evaluationdetailitem: {
              name: '',
              ordernum: 15,
              total: null
            },
            evaluationdetailitemsubList: [
              {
                percentage: 30,
                type: 1
              },
              {
                percentage: 70,
                type: 2
              }
            ]
          }
        ]}
      ],
      addEvaluationDto: {
        createdid: 1111,
        createtime: '',
        name: '',
        id: 0,
        memo: '',
        addEvaluationdetailDtoList: [],
        evaluationdetailpicList: [],
        evaluationroleList: []
      },
      addEvaluationDto1: {
        createdid: 1111,
        createtime: '',
        name: '',
        id: 0,
        memo: '',
        addEvaluationdetailDtoList: [],
        evaluationdetailpicList: [],
        evaluationroleList: []
      },
      scoreTable: [{evaluationdetail: []}],
      roleList: [],
      roleList1: [],
      addRole: {
        createtime: '',
        evaluationid: '',
        id: '',
        memo: '',
        name: ''
      },
      roleid: 1,
      showNum: 1,
      showList: [],
      showList1: [],
      addShowInfo: {
        createtime: '',
        evaluationdetailitemid: 0,
        evaluationid: 0,
        id: '',
        ordernum: ''
      },
      addListItem: {
        evaluationdetailitem: {
          createtime: '',
          evaluationdetailid: 0,
          id: '',
          name: '',
          ordernum: '',
          total: null
        },
        evaluationdetailitemsubList: [
          {
            createtime: '',
            evaluationdetailitemid: 0,
            id: 0,
            percentage: 30,
            type: 1
          },
          {
            createtime: '',
            evaluationdetailitemid: 0,
            id: 0,
            percentage: 70,
            type: 2
          }
        ]
      },
      rules: {
        name: [
          { required: true, message: '请输入评分表名称', trigger: 'blur' },
          { min: 1, max: 25, message: '长度在1到25个字符', trigger: 'blur' }
        ]
      },
      options: [{
        value: '1',
        label: '直方图'
      }, {
        value: '2',
        label: '5边雷达图'
      }, {
        value: '3',
        label: '元饼图'
      }, {
        value: '4',
        label: '6边雷达图'
      }]
    };
  },
  methods: {
    cancel() {
      // console.log(111);
      this.$confirm('确认取消新增?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          showClose: true,
          type: 'success',
          message: '已取消新增'
        });
        this.addEvaluationDto = this.addEvaluationDto1;
        this.tableList = this.tableList1;
        this.showList = this.showList1;
        this.roleList = this.roleList1;
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '取消'
        // });
      });
    },
    // 删除子项
    deleteBtn(val1, val2) {
      // console.log('参数1', val1);
      // console.log('参数2', val2);
      if (val2.evaluationdetailitemDtoList.length > 5) {
        // console.log('可以删除');
        this.tableList.filter(item => {
          if (item.evaluationdetail.id === val2.evaluationdetail.id) {
            // console.log(item);
            item.evaluationdetailitemDtoList.splice(val1, 1);
          }
        });
      } else {
        // this.$message.error('删除失败,新增项至少为5个');
        this.$message({
          showClose: true,
          message: '删除失败,新增项至少为5个',
          type: 'error'
        });
      }
    },
    // 添加子项
    addScoreItem(val, index) {
      // console.log('11', val);
      if (val.evaluationdetailitemDtoList.length < 10) {
        // // console.log('可以新增');
        // 先判断相等的能力项
        let addMsg = JSON.stringify(this.addListItem);
        let addMsg2 = JSON.parse(addMsg);
        // consol
        this.tableList.filter(item => {
          if (item.evaluationdetail.id === val.evaluationdetail.id) {
            // console.log(item);
            // item.evaluationdetailitemDtoList.push(this.addListItem);
            // item.evaluationdetailitemDtoList = [...item.evaluationdetailitemDtoList, {evaluationdetailitem: {...this.addItem2.evaluationdetailitem, ordernum: this.orderNum}, evaluationdetailitemsubList: this.addListItem.evaluationdetailitemsubList}];
            // item.evaluationdetailitemDtoList = [...item.evaluationdetailitemDtoList, {...this.addListItem, evaluationdetailitem: {...this.addListItem.evaluationdetailitem, ordernum: this.orderNum}}];
            item.evaluationdetailitemDtoList = [...item.evaluationdetailitemDtoList, {...addMsg2}];
            // this.orderNum++;
          }
        });
        // this.tableList[index].evaluationdetailitemDtoList.push(this.addListItem)
      } else {
        // this.$message.error('新增失败,新增项最多为10个');
        this.$message({
          showClose: true,
          message: '新增失败,新增项最多为10个',
          type: 'error'
        });
      }
    },
    // 显示选择图形
    showUl(val) {
      // console.log(val);
      // const newVal = {...val,val.}
      const newVal = this.list.filter(item => {
        if (item.id === val.id) {
          item.showUl = !item.showUl;
        }
      });
      this.list = [...this.list, ...newVal];
      // const name = document.querySelector(`${val.name}`);
      // console.log(name);
    },
    confirm() {
      // console.log('确认');
    },
    // input失去焦点事件
    inputBlur(val) {
      // console.log(val);
      // val = parseInt(val);
    },
    // 新增
    async addListBtn() {
      // console.log(222);
      let roleNum = 0;
      this.roleList.filter(item => {
        if (item.name === '项目经理') {
          roleNum++;
        }
      });
      // console.log(roleNum);
      this.addEvaluationDto = {...this.addEvaluationDto,
        evaluationdetailpicList: [...this.showList],
        addEvaluationdetailDtoList: [...this.tableList],
        evaluationroleList: [...this.roleList]};
      // console.log('新增的数据', this.addEvaluationDto);
      if (this.addEvaluationDto.name === '') {
        // alert('名称不能为空');
        this.$alert('评分表名称不能为空', {
          dangerouslyUseHTMLString: true
        });
      } else if (roleNum > 1) {
        this.$alert('只能有一个项目经理', {
          dangerouslyUseHTMLString: true
        });
      } else {
        this.addEvaluationDto.addEvaluationdetailDtoList.forEach(item => {
          item.evaluationdetailitemDtoList.forEach(i => {
            i.evaluationdetailitem.total = parseInt(i.evaluationdetailitem.total);
          });
        });
        const data = JSON.stringify(this.addEvaluationDto);
        // console.log(this.addEvaluationDto);
        const res = await AddScoreList(data);
        // console.log(res);
        if (res.code === 200) {
          this.$message({
            showClose: true,
            message: '新增成功',
            type: 'success'
          });
          setTimeout(() => {
            // location.reload();
            this.$emit('receive');
          }, 2000);
          // this.$emit('receive', 'ScoreList');
        // this.$router.push('/score-manage');
        } else {
          this.$message({
            showClose: true,
            message: `${res.msg}`,
            type: 'error'
          });
        }
      }
    },
    // 添加角色
    addRoleItem() {
      // console.log(this.roleList);
      if (this.roleList.length < 10) {
        this.roleList = [...this.roleList, {...this.addRole, id: this.roleid}];
        this.roleid++;
      } else {
        this.$alert('项目角色最多为十个', {
          dangerouslyUseHTMLString: true
        });
      }
    },
    // 删除角色
    deleteRoleItem(val) {
      // console.log(val);
      const newList = this.roleList.filter(item => {
        return item.id !== val.id;
      });
      this.roleList = newList;
    },
    // 添加显示
    addShow() {
      // console.log(111);
      if (this.showList.length < 30) {
        this.showList = [...this.showList, {...this.addShowInfo, id: this.showNum}];
        this.showNum++;
      };
    },
    // 删除显示
    deleteShow(val, index) {
      // console.log(val);
      this.showList.splice(index, 1);
      // const newList = this.showList.filter(item => {
      //   return item.ordernum !== val.ordernum;
      // });
      // this.showList = newList;
    },
    toList() {
      location.reload();
    },
    // 判断角色是否有重复
    roleName() {
      // console.log(this.roleList);
      let num = 0;
      this.roleList.filter(item => {
        if (item.name === '项目经理') {
          // console.log('11');
          num++;
          // console.log(num);
        }
      });
      if (num > 1) {
        this.$confirm('只能有一个项目经理', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          type: 'warning'
        }).then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
          // console.log(this.roleList);
        });
      }
    }
  },
  created() {
    // console.log('表数据', this.tableList);
    this.addEvaluationDto.createdid = sessionStorage.userid;
    // console.log(sessionStorage.userid);
  }
};
</script>

<style lang="less" scoped>
.addScore {
  display: flex;
  justify-content: center;
  font-family: PingFangSC-Regular, PingFang SC;
  overflow: hidden;
  /deep/.el-input__inner:focus {
    border-color: 0;
    border: 0;
    box-shadow: inset 0 0.005208rem 0.020833rem 0 #2fc0e0,
      inset 0 -0.005208rem 0.020833rem 0 #2fc0e0,
      inset 0.005208rem 0 0.020833rem 0 #2fc0e0,
      inset -0.005208rem 0 0.020833rem 0 #2fc0e0 !important;
  }
  .container {
    width: 98%;
    // height: 100vh;
    margin-top: 14px;
    .title {
      display: flex;
      justify-content: space-between;
      .details {
        display: inline-block;
        height: 55px;
        width: 140px;
        background: #ffffff;
        box-shadow: 1px -2px 3px 0px rgba(153, 153, 153, 0.5);
        border-radius: 5px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        text-align: center;
        line-height: 66px;
      }
      .toList {
        display: inline-block;
        height: 55px;
        line-height: 55px;
      }
    }
    .content {
      background: #ffffff;
      box-shadow: 1px -2px 3px 0px rgba(153, 153, 153, 0.5),
        1px 2px 3px 0px rgba(153, 153, 153, 0.5);
      padding: 0 20px;
      margin-bottom: 20px;
    }
    .topBtn {
      display: flex;
      height: 90px;
      justify-content: space-between;
      align-items: center;
      padding-right: 30px;
      .scoreName {
        display: flex;
        padding-top: 20px;
        // align-items: center;
        // margin: 0;
        // padding: 0;
        // .el-form-item__content{
        //   width: 200px;
        // }
        span {
          font-size: 16px;
          margin-top: 10px;
        }
        input {
          height: 40px;
          width: 300px;
          border: 0;

          border-radius: 5px;
          box-shadow: inset -1px -1px 3px 0px #2fc0e0,
            inset 1px 1px 3px 0px #2fc0e0;
          outline: none;
          // box-shadow: 0px 0px 2px 2px #a7f1fe;
        }
        input::placeholder {
          text-align: center;
        }
      }
      .Btn {
        button {
          height: 35px;
          width: 100px;
          border-radius: 4px;
          font-size: 16px;
          font-weight: 400;
          line-height: 35px;
          &:nth-child(1) {
            background-color: #e8f8fb;
            color: #2fc0e0;
          }
          &:nth-child(2) {
            margin-left: 21px;
            background: #2fc0e0;
            color: #ffffff;
          }
        }
      }
    }
  }
}
.tableContent {
  // padding: 0 20px;
  span {
    display: inline-block;
    // width: 42px;
    height: 20px;
    font-size: 14px;
    // font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
    margin-bottom: 12px;
  }
  .table {
    width: 100%;
    // border:1px solid #E6EBFF;
    // border-collapse: collapse;
    table {
      input {
        border: 0;
        // outline: none;
      }
    }
    input::placeholder {
      color: #999;
      text-align: center;
    }
    tr {
      border-spacing: 0;
      th {
        border: 1px solid #e6ebff;
        font-size: 14px;
        color: #333333;
        font-weight: 600;
      }
      td {
        border: 1px solid #e6ebff;
        border-spacing: 0;
      }
    }
  }
}

.showSel:focus-within {
  box-shadow: inset 0 0.005208rem 0.020833rem 0 #2fc0e0,
    inset 0 -0.005208rem 0.020833rem 0 #2fc0e0,
    inset 0.005208rem 0 0.020833rem 0 #2fc0e0,
    inset -0.005208rem 0 0.020833rem 0 #2fc0e0;
}
.Capability-refinement {
  tr {
    // height: 45px;
    // line-height: 45px;
    position: relative;
    img {
      &:nth-child(1) {
        width: 18px;
        height: 18px;
        position: absolute;
        left: 10px;
        top: 12px;
      }
    }
    td {
      position: relative;
      .addBtnItem {
        position: absolute;
        width: 18px;
        height: 18px;
        top: 12px;
        right: 10px;
      }
    }
    input {
      outline: none;
    }
    span {
      font-size: 12px;
      font-weight: 500;
    }
  }
}

.role {
  margin-top: 20px;
  height: 120px;
  .roleContent {
    // margin-top: 10px;
    // margin-bottom: 100px;
    display: flex;
    div {
      width: 135px;
      height: 45px;
      background: #e8f8ec;
      border-radius: 8px;
      margin-right: 20px;
      // display: flex;
      position: relative;
      input {
        background: #e8f8ec;
        width: 100%;
        height: 100%;
        border: 0;
        // outline: none;
      }
      img {
        height: 22px;
        width: 22px;
        position: absolute;
        right: -10px;
        top: -10px;
      }
    }
    //   input:focus-within{
    //   box-shadow: inset 0 0.005208rem 0.020833rem 0 #2fc0e0, inset 0 -0.005208rem 0.020833rem 0 #2fc0e0, inset 0.005208rem 0 0.020833rem 0 #2fc0e0, inset -0.005208rem 0 0.020833rem 0 #2fc0e0
    // }
  }
  .roleTitle {
    height: 60px;
    display: flex;
    align-items: center;
    span {
      font-size: 14px;
      // font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
    }
    img {
      height: 17px;
      width: 17px;
      // margin-top: 5px;
      margin-left: 5px;
    }
  }
}
// table tr td:focus-within{
//   box-shadow: inset 0 0.005208rem 0.020833rem 0 #2fc0e0, inset 0 -0.005208rem 0.020833rem 0 #2fc0e0, inset 0.005208rem 0 0.020833rem 0 #2fc0e0, inset -0.005208rem 0 0.020833rem 0 #2fc0e0
// }
.show {
  margin-top: 40px;
  padding-bottom: 20px;
  tr td:focus-within {
    box-shadow: inset 0 0.005208rem 0.020833rem 0 #2fc0e0,
      inset 0 -0.005208rem 0.020833rem 0 #2fc0e0,
      inset 0.005208rem 0 0.020833rem 0 #2fc0e0,
      inset -0.005208rem 0 0.020833rem 0 #2fc0e0;
  }
  span {
    font-size: 14px;
    // font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 20px;
    // display: inline-block;
  }
  table {
    border-spacing: 0;
    border-collapse: collapse;
    // box-sizing: content-box;
    // margin-bottom: 20px;
    thead {
      td {
        width: 61px;
        height: 70px;
        background: #f1f5ff;
        border: 1px solid #e6ebff;
        text-align: center;
        position: relative;
        padding: 0;
        img {
          position: absolute;
          height: 17px;
          width: 17px;
          bottom: 3px;
          right: 24px;
        }
      }
    }
    tbody {
      td {
        width: 61px;
        height: 50px;
        background: #ffffff;
        border: 1px solid #f1f5ff;
        text-align: center;
        padding: 0;
      }
    }
  }
  .tableContent {
    margin-top: 10px;
    height: 123px;
    display: flex;
    align-items: center;
    input {
      outline: none;
      border: 0;
      background: transparent;
    }
    .addShowItem {
      // height: 122px;
      height: 100%;
      width: 60px;
      // background: #bba4a4;
      border: 1px solid #e6ebff;
      box-sizing: border-box;
      position: relative;
      border-spacing: 0;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      img {
        height: 17px;
        width: 17px;
        position: absolute;
        top: 50px;
        left: 22px;
        // line-height: 120px;
      }
    }
  }
}
.table1,
.table2 {
  border-collapse: collapse;
  border-width: 0px;
  border-style: hidden;
  #miscodeInput {
    border: none;
    outline: none;
    width: 80%;
    height: 80%;
  }
  tr td:focus-within {
    box-shadow: inset 0 0.005208rem 0.020833rem 0 #2fc0e0,
      inset 0 -0.005208rem 0.020833rem 0 #2fc0e0,
      inset 0.005208rem 0 0.020833rem 0 #2fc0e0,
      inset -0.005208rem 0 0.020833rem 0 #2fc0e0;
  }
}
// /deep/.el-input__inner:focus-within{
//   box-shadow: inset 0 0.005208rem 0.020833rem 0 #2fc0e0, inset 0 -0.005208rem 0.020833rem 0 #2fc0e0, inset 0.005208rem 0 0.020833rem 0 #2fc0e0, inset -0.005208rem 0 0.020833rem 0 #2fc0e0 !important;
// }
.table2 {
  margin: 0;
  padding: 0;
  width: 100%;
  tr {
    td {
      padding-left: 50px;
    }
  }
}

.table {
  input {
    background: transparent;
    color: #555;
  }
  tr th {
    font-weight: 600;
  }
}
// 将input的type为number时后面的增减隐藏
.table1,
.show {
  // 清除input按钮
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
}
.itemTitle {
  input {
    // border: 1px solid red;
    height: 50px;
    outline: none;
  }
}
.itemTitle:focus-within {
  box-shadow: inset 0 0.005208rem 0.020833rem 0 #2fc0e0,
    inset 0 -0.005208rem 0.020833rem 0 #2fc0e0,
    inset 0.005208rem 0 0.020833rem 0 #2fc0e0,
    inset -0.005208rem 0 0.020833rem 0 #2fc0e0;
}
button {
  cursor: pointer;
}
</style>
